<template>
  <p-card :bordered="false" class="containent">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper wrap1">
      <div class="topnav">
        <div class="topsearch">
          <p-form-model layout="inline" :model="topForm" :rules="rules">
            <p-row :gutter="24">
              <p-col :xl="7" :md="12">
                <p-form-model-item label="条码扫描">
                  <p-input placeholder="请输入" @change="changScan"></p-input>
                </p-form-model-item>
              </p-col>
              <p-col :xl="7" :md="12">
                <p-form-model-item label="线体">
                  <p-select
                    v-model="topForm.lineno"
                    allowClear
                    @change="changeLine"
                  >
                    <p-select-option
                      v-for="item in lines"
                      :key="item.codeValue"
                      :value="item.codeValue"
                      >{{ item.textValue }}</p-select-option
                    >
                  </p-select>
                </p-form-model-item>
              </p-col>
              <p-col :xl="7" :md="12">
                <p-form-model-item label="工站" prop="stationCode">
                  <p-tree-select
                    v-model="topForm.stationCode"
                    :tree-data="stations"
                    :dropdown-style="{ maxHeight: '500px' }"
                    tree-node-filter-prop="title"
                    show-search
                    allow-clear
                    @change="changeHandler"
                  />
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
        </div>
        <div class="btn_list">
          <p-button type="primary" @click="path('/work/datacollect/Processkey')"
            >关键件采集</p-button
          >
          <p-button
            type="primary"
            style="margin: 0 10px"
            @click="path('/work/datacollect/Packaging')"
            >包装采集</p-button
          >
          <p-button type="primary" @click="path('/work/datacollect/Startaging')"
            >老化采集</p-button
          >
        </div>
      </div>
      <div class="content">
        <div class="list1">
          <Order @on-item-click="post" :params="topForm"></Order>
        </div>
        <div class="tab">
          <p-row type="flex" justify="space-between">
            <p-col>
              <div>
                <span
                  style="
                    height: 28px;
                    margin-bottom: 15px;
                    padding-left: 8px;
                    line-height: 28px;
                    border-left: 4px solid #4064df;
                    font-weight: 800;
                  "
                  >条码信息</span
                >
              </div>
            </p-col>
          </p-row>
          <p-row type="flex" justify="space-between">
            <p-col :span="9">
              <div class="left_list">
                <p-form-model :layout="horizontal" :model="searchForm">
                  <p-form-model-item>
                    <p-input
                      placeholder="显示以扫SN"
                      v-model.trim="searchForm.SN"
                    />
                  </p-form-model-item>
                  <p-form-model-item>
                    <p-input
                      placeholder="显示已扫附件编码"
                      v-model.trim="searchForm.info"
                    />
                  </p-form-model-item>
                </p-form-model>
                <div class="operator">
                  <p-button type="primary" @click="finshed">成品入库</p-button>
                  <p-button type="primary" @click="reload">重新开始</p-button>
                </div>
              </div>
            </p-col>
            <p-col
              :span="14"
              class="ProcessDetails"
              style="
                height: 230px;
                border: 1px solid #eee;
                line-height: 40px;
                padding: 30px 20px 0px 20px;
              "
            >
              <!-- 右上侧Table区域 -->
              <p-form-model layout="inline" :model="form">
                <p-row :gutter="24">
                  <p-col :xl="13" :md="13">
                    <p-form-model-item label="工序工单">
                      <p-input
                        readOnly
                        placeholder=""
                        v-model="form.processBillNo"
                      ></p-input>
                    </p-form-model-item>
                  </p-col>
                  <p-col :xl="11" :md="11">
                    <p-form-model-item label="数量">
                      <p-input
                        readOnly
                        placeholder=""
                        v-model="form.planQty"
                      ></p-input>
                    </p-form-model-item>
                  </p-col>
                </p-row>
              </p-form-model>
              <div style="height: 45px">
                <p-alert
                  v-if="tags"
                  :message="msg"
                  :type="msgType"
                  closable
                  :after-close="handleClose"
                  show-icon
                />
              </div>
              <div>
                <p-col :span="8" style="padding: 0px 20px">
                  <p-row :span="24">
                    <div class="num">
                      <div class="num_item">待包装数量</div>
                      <div class="num_item">
                        {{ packingNum.waitPackQty || 0 }}
                      </div>
                    </div>
                  </p-row>
                </p-col>
                <p-col :span="8" style="padding: 0px 20px">
                  <p-row :span="24">
                    <div class="num" style="background: #006666">
                      <div class="num_item">已包装数量</div>
                      <div class="num_item">
                        {{ packingNum.packedQty || 0 }}
                      </div>
                    </div>
                  </p-row>
                </p-col>
                <p-col :span="8" style="padding: 0px 20px">
                  <p-row :span="24">
                    <div class="num" style="background: #3333ff">
                      <div class="num_item">已入库数量</div>
                      <div class="num_item">
                        {{ packingNum.inStorageQty || 0 }}
                      </div>
                    </div>
                  </p-row>
                </p-col>
              </div>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            justify="space-between"
            style="margin-top: 20px"
            class="bottom-form"
          >
            <!-- 左表 -->
            <p-col
              span="9"
              style="height: 100%; display: flex; flex-direction: column"
            >
              <div>
                <span
                  style="
                    height: 28px;
                    margin-bottom: 15px;
                    padding-left: 8px;
                    line-height: 28px;
                    border-left: 4px solid #4064df;
                    font-weight: 800;
                  "
                  >包装清单</span
                >
              </div>
              <div class="caiji">
                <p-table
                  ref="table"
                  size="middle"
                  bordered
                  :pagination="false"
                  rowKey="id"
                  :columns="columns"
                  :scroll="tableScroll1"
                  :dataSource="columnsData"
                  :loading="loading"
                >
                  <template slot="status" slot-scope="text, record">
                    <p-tag
                      v-if="record.result === record.stationsRequired"
                      color="#4064E9"
                      >{{ record.result }}</p-tag
                    >
                    <p-tag v-else color="#999">{{ record.result }}</p-tag>
                  </template>
                </p-table>
              </div>
            </p-col>
            <!-- 右表 -->
            <p-col
              span="14"
              style="height: 100%; display: flex; flex-direction: column"
            >
              <div>
                <span
                  style="
                    height: 28px;
                    margin-bottom: 15px;
                    padding-left: 8px;
                    line-height: 28px;
                    border-left: 4px solid #4064df;
                    font-weight: 800;
                  "
                  >历史记录</span
                >
              </div>
              <div class="bangding">
                <p-table
                  ref="table"
                  size="middle"
                  bordered
                  :pagination="false"
                  rowKey="id"
                  :columns="columns1"
                  :scroll="tableScroll"
                  :dataSource="bindrecordData"
                  :loading="loadingRecord"
                >
                  <template slot="status" slot-scope="text">
                    <p-tag v-if="text == 0" color="blue"
                      ><p-icon type="clock-circle" />待检</p-tag
                    >
                    <p-tag v-else color="green"
                      ><p-icon type="check-circle" />检验完成</p-tag
                    >
                  </template>
                </p-table>
              </div>
            </p-col>
          </p-row>
        </div>
      </div>
    </div>
    <!-- 弹出窗 -->
    <PackingModule ref="Packing" @refresh="getHistory"></PackingModule>
  </p-card>
</template>

<script>
import { api } from "@/api/manage";
import { timestampToDatetime } from "@/utils/util";
import { postAction, getAction, deleteAction, httpAction } from "@/api/manage";
import PackingModule from "./modules/PackingModule";
import mixins from "./modules/line-station";
import Order from "@/views/work/productionExecution/components/order.vue";

//包装清单
const columns = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "附件编码",
    align: "center",
    dataIndex: "mcode",
  },
  {
    title: "绑定数量",
    align: "center",
    scopedSlots: { customRender: "status" },
  },
  {
    title: "数量",
    align: "center",
    dataIndex: "stationsRequired",
  },
];
//历史记录
const Binding_record = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "生产数量",
    align: "center",
    dataIndex: "produceQyt",
  },
  {
    title: "栈绑号",
    align: "center",
    dataIndex: "plankNo",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品名称",
    align: "center",
    dataIndex: "productName",
  },
  {
    title: "入库数量",
    align: "center",
    dataIndex: "inStorageQty",
  },
  {
    title: "包装人员",
    align: "center",
    dataIndex: "packerName",
  },
  {
    title: "入库时间",
    align: "center",
    dataIndex: "inStorageTime",
    customRender: (text) => {
      return timestampToDatetime(text, 1);
    },
  },
  {
    title: "送检状态",
    align: "center",
    dataIndex: "checkStatus",
    scopedSlots: { customRender: "status" },
  },
];
export default {
  name: "",
  mixins: [mixins],
  components: {
    PackingModule,
    Order,
  },
  data() {
    return {
      url: {
        // Info: "/mes-manufacture/mfBarCodeCheck/getInfoByBarCode", //根据条码获得相关信息
        Info: "/mes-manufacture/mfHandFilling/gethandPackShowInfo",
        getHistory: "/mes-manufacture/mfHandFilling/getPackedHistory", //历史记录
        handPackInStorage: "/mes-manufacture/mfHandFilling/handPackInStorage", //手动包装
        getcolumns: "/mes-craft/craft/mesPeProcessRoute/getBomInfoByCode", //根据工艺路线编码获得附件
      },
      columns: [], //条码信息表格
      columns1: [], //右下角表
      dataSource: [],
      tags: false,
      bindrecordData: [],
      searchForm: {
        SN: "",
        info: "",
      },
      tableScroll: {
        x: 900,
      },
      form: {
        inStorageQty: 0, //已入库数量
        packedQty: 0, //已包装数量
        processBillNo: "", //工序工单号
        productname: "", //产品名称
        planQty: "", //数量
        processCoding: "", //工艺路线编码
        processVersion: "", //工艺路线版本号
        waitPackQty: 0, //待包装数量
      },
      packingNum: {},
      selectedRowKeys: [],
      selectionRows: [], //选中的record
      stationList: [],
      loadingRecord: false,
      message: "",
      collectData: [],
      loading: false,
      columnsData: [],
      totalAccessory: 0,
    };
  },
  watch: {
    "searchForm.SN": function () {
      this.getInfo();
    },
    form: function () {
      this.getColumns();
    },
    "searchForm.info": function (oldVal) {
      this.columnsData.map((item) => {
        let params = {
          attachmentCode: item.mcode,
          attachmentName: item.mname,
          attachmentQty: item.stationsRequired,
        };
        if (item.mcode == oldVal) {
          if (item.result < item.stationsRequired) {
            this.collectData.push(params);
            item.result++;
            this.tags = true;
            this.msg = "扫描成功";
            this.msgType = "success";
          } else if ((item.result = item.stationsRequired)) {
            this.tags = true;
            this.msg = "该附件已经完成采集所需数量";
            this.msgType = "warning";
          }
        }
      });
    },
    collectData: {
      handler: function (val) {
        if (val && val.length === this.totalAccessory) {
          this.handPackInStorage();
          this.getInfo("refresh");
        }
      },
      deep: true,
    },
  },
  computed: {},
  created() {
    this.columns = columns;
    this.columns1 = Binding_record;
  },
  mounted() {
    this.getHistory(); //获得历史记录
  },
  methods: {
    handleClose() {
      this.tags = false;
    },
    // 获得工序工单信息
    getInfo(refresh) {
      let barCode = this.searchForm.SN;
      if (barCode) {
        let params = {
          barCode,
          stationCode: this.topForm.stationCode || "",
        };
        getAction(this.url.Info, params).then((res) => {
          if (!res.success) {
            this.tags = "true";
            this.msg = res.msg;
            this.msgType = "warning";
          }
          if (res.code === 0) {
            this.packingNum = res.data;
            if (!refresh) {
              this.tags = "true";
              this.msg = "扫描成功,请扫描附件";
              this.msgType = "success";
            }
          }
        });
      }
    },
    post(s) {
      this.form = s;
    },
    //获得附件
    getColumns() {
      this.totalAccessory = 0;
      this.loading = true;
      let params = {
        routerCode: this.form.processCoding,
        processCode: this.topForm.stationCode,
        version: this.form.processVersion,
        type: 1,
      };
      httpAction(this.url.getcolumns, params, "post").then((res) => {
        this.loading = false;
        if (res.success) {
          this.columnsData = res.data;
          this.columnsData.map((item) => {
            this.$set(item, "result", 0);
            this.totalAccessory += item.stationsRequired;
          });
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    //获得历史记录
    getHistory() {
      let params = {
        stationCode: this.topForm.stationCode,
      };
      postAction(this.url.getHistory, params).then((res) => {
        if (res.code === 0) {
          this.bindrecordData = res.data;
          this.getInfo("refresh");
        }
      });
    },
    finshed() {
      this.$refs.Packing.edit(this.topForm.stationCode);
      this.$refs.Packing.title = "包装入库";
      this.$refs.Packing.disableSubmit = false;
    },
    reload() {
      this.searchForm.info = "";
      this.collectData = [];
      this.columnsData.map((item) => {
        item.result = 0;
      });
    },
    //手动包装
    handPackInStorage() {
      let params = {
        pnsn: this.searchForm.SN,
        stationCode: this.topForm.stationCode,
        stationName: this.topForm.stationName,
        attachmentList: this.collectData,
        
      };
      postAction(this.url.handPackInStorage, params).then((res) => {
        if (!res.success) {
          this.msg = res.msg;
          this.msgType = "warning";
        }
        if (res.code === 0) {
          this.msg = "手动包装成功";
          this.msgType = "success";
          this.getInfo("refresh");
          this.reload();
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.containent {
  height: 100%;
  /deep/ .poros-card-body {
    height: 100%;
  }
  .wrap1 {
    flex-direction: column;
    display: flex;
    height: 100%;
    .topnav {
      display: flex;
      justify-content: space-between;
      .topsearch {
        flex: 1;
      }
      .btn_list {
        padding-top: 2px;
        padding-left: 24px;
      }
    }
  }
}
.content {
  flex: 1;
  display: flex;
  overflow: hidden;
  .list1 {
    width: 340px;
  }
  .tab {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    .left_list {
      height: 230px;
      border: 1px solid #eee;
      line-height: 40px;
      padding: 25px 20px;
    }
    .bottom-form {
      flex: 1;
      height: 100%;
      overflow: hidden;
      .caiji {
        height: 100%;
        overflow: auto;
        border: 1px solid #eee;
        padding: 10px;
      }
      .bangding {
        height: 100%;
        overflow: auto;
        border: 1px solid #eee;
        padding: 10px;
      }
    }
  }
}
.operator {
  margin-top: 50px;
}
.operator .poros-btn {
  float: right;
  margin-left: 10px;
}
.notice {
  margin: 0 auto;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.notice .poros-alert-message {
  font-size: 25px;
  color: #67c23a;
}
.num {
  background: #409eff;
  height: 70px;
  margin-top: 10px;
  border-radius: 5px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.num .num_item {
  font-size: 20px;
  font-weight: 500;
  height: 30px;
}
/deep/.poros-alert-message {
  // color: rgb(103, 194, 58);
  font-size: 18px;
}
.poros-alert {
  text-align: center;
}
</style>